<div class="view-content" ng-keydown="vm.utilitySvc.handleEvent(vm.handleKeyDown, $event)"
     hm-swipeleft="vm.utilitySvc.handleEvent(vm.displayNextPage)"
     hm-swiperight="vm.utilitySvc.handleEvent(vm.displayPreviousPage, $event)" tabindex="0">
  <div id="help-page-{{vm.currentPage}}" class="help-page-container animate-fade-in" ng-show="vm.showPage">
    <div class="help-page-content" ng-bind-html="vm.pages[vm.currentPage - 1]"></div>
    <div class="pagination">
      <a href="#" ng-click="vm.utilitySvc.handleEvent(vm.close, $event)" ng-show="vm.currentPage === 1">
        <span>{{ vm.platformSvc.getI18nString(vm.Strings.Button.Close) }}</span>
      </a>
      <a href="#" class="prev-link" ng-click="vm.utilitySvc.handleEvent(vm.displayPreviousPage, $event)"
         ng-hide="vm.currentPage === 1">
        <span>{{ vm.platformSvc.getI18nString(vm.Strings.View.Help.Previous) }}</span>
      </a>
      <span class="page-number">{{vm.currentPage | number : 0}} / {{vm.pages.length | number : 0}}</span>
      <a href="#" class="next-link focused" ng-click="vm.utilitySvc.handleEvent(vm.displayNextPage, $event)"
         ng-hide="vm.currentPage === vm.pages.length">
        <span>{{ vm.platformSvc.getI18nString(vm.Strings.Button.Next) }}</span>
      </a>
      <a href="#" class="focused" ng-click="vm.utilitySvc.handleEvent(vm.close, $event)"
         ng-show="vm.currentPage === vm.pages.length">
        <span>{{ vm.platformSvc.getI18nString(vm.Strings.Button.Close) }}</span>
      </a>
    </div>
  </div>
</div>
